<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue起步</title>
</head>
<body>
<div id="app1">
    {{ massage }}
</div>
<div id="app2">
    <span v-bind:title="message">鼠标悬停</span>
</div>
<div id="app3">
    <span v-if="seen">现在你看到我了</span>
</div>
<div id="app4">
    <ul>
        <li v-for="notice in notices">id:{{ notice.id }}  ------  内容: {{ notice.text }}</li>
    </ul>
</div>
<div id="app5">
    <button v-on:click='reverseMethod'>reverse</button>
    <p>{{ message }}</p>
</div>
<div id="app6">
    <div>{{ message }}</div>
    <input type="text" v-model="message">
</div>
<div id="app7">
    <todo-item v-for="item in prolist"
                v-bind:id="item.id"
                v-bind:text="item.text"></todo-item>
</div>
<div id="app8"></div>
<div id="app9"></div>
<div id="app10">
    app10 {{ massage }} <!--加 v-once 只能取一次后续不更新-->
    <div v-html="rowHtml"></div> <!--使用v-html 属性可以识别html代码-->
    <div>{{ok? 'yes':'no'}}</div>
    <div>{{ arr.split('').reverse().join('') }}</div>
    <div> {{reverseMassage}} </div>
</div>
<style>
    .active {
        background: #0074D9;
    }
    .text-err {
        color: red;
    }
</style>
<div id="app11">

    <p :class="{active : isActive,'text-err' : isErr}">app11</p>
    <p :class="classObject">app11</p>
    <p :class="[activeClass,errClass]">app11</p>
    <p :class="[{active:isActive},errClass]">app11</p>
</div>
<div id="app12">
    <button v-on:click="changevIf">改变</button>
    <template v-if=" vIf>7">
        <input type="text" placeholder="大于7" key="a">
    </template>
    <template v-else-if="vIf <7 && vIf > 4">
        <input type="text" placeholder="大于4小于7" key="b">
    </template>
    <template v-else-if="vIf>1 && vIf < 4">
        <input type="text" placeholder="大于1小于4" key="c">
    </template>
    <template v-else>
        <input type="text" placeholder="大于1小于4" key="d">
    </template>
</div>
<div id="app13">
    <p>数组循环</p>
    <ul>
        <li v-for="item in arrItems">{{item}}</li>
    </ul>
    <p>数组index</p>
    <ul><li v-for="(item,index) in arrItems">{{ item }} ----- {{ index }}</li></ul>

    <p>json循环</p>
    <ul><li v-for="(value,key,index) in jsonItems">{{ value }}---{{key}}-----{{index}}</li></ul>
</div>
<div id="app14">
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })
    var app14 = new Vue({
        el : '#app14'
    })
    var app13 = new Vue({
        el : '#app13',
        data : {
            arrItems : [
                'joho','jack','bluce'
            ],
            jsonItems : {
                a : 1,
                b : 2,
                c : 3
            }
        }
    })
    var  app12 = new Vue({
        el : '#app12',
        data : {
            vIf : Math.random()*10
        },
        methods : {
            changevIf : function () {
                this.vIf = Math.random()*10
                console.log(this.vIf)
            }
        }
    })
    var app11 = new Vue({
        el : '#app11',
        data : {
            isActive : true,
            isErr : false,
            activeClass : 'active',
            errClass : 'text-err'
        },
        computed : {
            classObject : function () {
                return {
                    active : this.isActive,
                    'text-err' : this.isErr
                }
            }
        }
    })
    var app10 = new Vue({
        el : '#app10',
        data : {
            ok : true,
            arr : 'abcdefg',
            massage : 1,
            rowHtml : '<span style="color:red;">我是rowHtml</span>'
        },
        computed : { //计算属性
            reverseMassage : function () {
                return this.arr.split('').reverse().join('');
            }
        }
    })
    var app9 = new Vue({
        el : '#app9',
        data : {
            massage : 1
        },
        created : function () {
            console.log(this);
        }
    })
    var app8Data = {
        massage : 'i am aap8'
    }
    var app8 = new Vue({
        el : '#app8',
        data : app8Data
    })
    //console.log(app8);
    //console.log( app8Data === app8.$data);
    app8.$watch('massage',function (newValue,oldValue) {
        console.log(oldValue, newValue);
    })
    Vue.component('todo-item',{
        props : ['id','text'],
        template : '<li>{{ id }}{{ text }}<li>'
    })
    var app7 = new Vue({
        el : '#app7',
        data : {
            prolist : [
                {id : 0, text : '我是0'},
                {id : 1, text : '我是1'},
                {id : 2, text : '我是2'},
                {id : 3, text : '我是3'}
            ]
        }
    })
    var app6 = new Vue({
        el : '#app6',
        data : {
            message : 'hellow iwzyuan'
        }
    })
    var app5 = new Vue({
        el: '#app5',
        data : {
            message : 'hellow iwzyuan'
        },
        methods : {
            reverseMethod : function () {
                this.message = this.message.split('').reverse().join('');
            }
        }
    })
    var app4 = new Vue({
        el : '#app4',
        data : {
            notices : [
                {id : 0, text : '我是0'},
                {id : 1, text : '我是1'},
                {id : 2, text : '我是2'},
                {id : 3, text : '我是3'}
            ]
        }
    })
    var app3 = new Vue({
        el : '#app3',
        data : {
            seen : false
        }
    })
    var app2 = new Vue({
        el : '#app2',
        data: {
            message : '页面加载于 ' + new Date().toLocaleString()
        }
    })
    var vue1Data = {
        massage : 'Hello Vue'
    }
    // Object.freeze(vue1Data)  加入这个方法则冻结vue1Data使它不能改变
    var app1 = new Vue({
        el : '#app1',
        data :vue1Data
    })

</script>
</body>
</html>